<template>
  <div>
    <el-row type="flex" class="row-bg map-top-menu" justify="space-between">
      <el-col :span="12">
        <span>軌跡回放</span>
        <span class="driver-name">{{ facilityName }} (IMEI: {{ facilityNum }})</span>
        <span class="driver-time"><i class="el-icon-info"></i>溫馨提示：可查詢最近6個月紀錄</span>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button>實時跟蹤</el-button>
      </el-col>
    </el-row>
    <div style="position: relative;">
      <el-row type="flex" class="row-bg" justify="space-between" style="padding: 10px;">
        <el-col :span="18">
          <el-col :span="4">
            <el-input
              placeholder="IMEI"
              suffix-icon="el-icon-search"
              v-model="input1">
            </el-input>
          </el-col>

          <el-select v-model="value" placeholder="請選擇">
            <el-option
              v-for="item in dateOption"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            start-placeholder="開始日期"
            end-placeholder="結束日期"
            :default-time="['12:00:00']">
          </el-date-picker>
          <!-- 定位方式：
          <el-select v-model="value2" placeholder="請選擇">
            <el-option
              v-for="item in locationOption"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select> -->
          <el-button type="primary" @click="onSearch">確定</el-button>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          停留標記:
          <el-select v-model="value3" placeholder="請選擇">
            <el-option
              v-for="item in timeOption"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button disabled>軌跡總覽</el-button>
          <el-button disabled>軌跡明細</el-button>
          <!-- <el-button disabled>導入軌跡播放</el-button> -->
          <el-button @click="onExport">導出Excel</el-button>
        </el-col>
      </el-row>
      <span id="mapdreess" class="map-address dn" style="overflow: hidden; display: inline;">
        <div class="form-group p-r10">
          <div class="play-control pr oh" id="statue">

            <i class="el-icon-video-play" @click="startAnimation" v-if="true" style="color: #ffffff;"></i>
            <!-- <i class="el-icon-video-pause" @click="startAnimation" v-if="true"></i> -->


            <div class="play-line">
              <div id="playSlider" class="nstSlider" data-range_min="0" data-range_max="1000" data-cur_min="0">
                <div class="leftGrip nst-animating" tabindex="0" style="left: 107px;"></div>
              </div>
              <div class="play-info">
                <div class="speed speed-control fr clearfix">
                  <div class="speed-text d-ib" title="速度">速度:</div>
                  <div class="speed-line d-ib">
                    <div id="speedSlider" class="nstSlider" data-range_min="0" data-range_max="100" data-cur_min="50">
                      <div class="leftGrip nst-animating" data-hover="快" tabindex="0" style="left: 10px;"></div>
                    </div>
                  </div>
                </div>
                <span class="time" id="gpsTime">00:00:00</span>
              </div>
            </div>
          </div>
        </div>
        {{ address }}
      </span>
    </div>
    <export-excel-common ref="myChild" :exportExcelInfo="exportExcelInfo" :tableData="tableAllData"
      :exportExcelArry="exportExcelArry"></export-excel-common>
  </div>
</template>

<script>
import ExportExcelCommon from '@/components/common/export-excel-common'
import { timestampToTime } from '@/utils/tools'
import moment from 'moment'
import { mapState } from 'vuex'
import { dateOption, timeOption } from '@/const'

export default {
  name: 'map-top-menu',

  components: {
    [ExportExcelCommon.name]: ExportExcelCommon
  },

  props: ['facilityNum', 'facilityName', 'address'],

  data() {
    return {
      input1: '',
      value: '1',
      value1: '',
      value2: '',
      value3: '1',
      //导出表格字段及formatter信息
      exportExcelArry: [
        {
          prop: 'id',
          label: '序号',
          formatterFlag: false
        },{
          prop: 'createTime',
          label: '定位时间',
          formatterFlag: false
        },{
          prop: 'lng',
          label: '经度/纬度',
          formatterFlag: false
        },{
          prop: 'address',
          label: '地址',
          formatterFlag: false
        },{
          prop: 'numberSatellites',
          label: '定位类型',
          formatterFlag: false
        },{
          prop: 'dataMode',
          label: '上報模式',
          formatterFlag: false
        },
        // {
        //   prop: 'userFundRedEnvelopRecord.status',
        //   label: '上报模式',
        //   formatterFlag: true,
        //   formatterType: 'common-type',
        //   formatterInfo: [{
        //     value: 0,
        //     label: '未完成'
        //   }, {
        //     value: 1,
        //     label: '已完成'
        //   }]
        // },
        ],
      //需要导出的table数据
      tableAllData: []
    }
  },

  computed: {
    ...mapState({
      exportData: (state) => state.map.exportData,
    }),

    //导出excel表格id及excel名称
    exportExcelInfo() {
      let times = moment().format('YYYYMMDDHHmmss')
      return {
        excelId: 'record-table',
        excelName: '定位记录' + times + '.xlsx'
      }
    },

    dateOption() {
      return dateOption
    },

    timeOption() {
      return timeOption
    }
  },

  methods: {
    onExport() {
      this.tableAllData = this.exportData.map((item, index) => {
        return {
          id: index + 1,
          createTime: window.Tools.timestampToTime(item.createTime),
          lng: item.longitude + '/' + item.latitude,
          address: item.address,
          numberSatellites: '卫星定位',
          dataMode: '定时上报',
        }
      })
      this.$refs.myChild.exportExcel()
    },

    onSearch() {

    },

    startAnimation() {
      this.$emit('startAnimation')
    },

  }
}
</script>

<style scoped lang="scss">
  .map-top-menu {
    background-color: aliceblue;
    background-image: -webkit-linear-gradient(#F1F5FD, #E9F0FF);
    background-image: -moz-linear-gradient(#F1F5FD, #E9F0FF);
    background-image: linear-gradient(#F1F5FD, #E9F0FF);
    box-shadow: inset 0 1px 0 #fff;
    padding: 4px 15px;
    border-bottom: 1px solid #ddd;
    color: #333;
    line-height: 50px;
    font-weight: 700;

    .driver-name {
      margin-left: 10px;
      color: #009934;
    }

    .driver-time {
      color: #f19b04;
    }
  }

  .map-address {
    left: 260px;
    right: 260px;
    bottom: -0.85rem;
    padding: 8px 15px;
    border-top: 0;
    border-radius: 0 0 50px 50px;
    background-color: #fff;
    font-size: 14px;
    color: #000;
    font-weight: 500;
    text-align: center;
    position: absolute;
    z-index: 20;
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: 0px 1px 4px -1px #eee
  }

  .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .p-r10 {
    padding-right: 10px;
  }

  .play-control {
    height: 36px;
    overflow: hidden;
    position: relative;
  }

  .el-icon-video-play {
    position: relative;
    width: 28px;
    height: 28px;
    background-color: #666;
    border-radius: 50%;
    cursor: pointer;
    float: left;
  }

  .el-icon-video-play:before {
    // content: "";
    position: absolute;
    // top: 50%;
    // left: 50%;
    // width: 0;
    // height: 0;
    // border-width: 6px 0 6px 10px;
    // margin-top: -6px;
    // margin-left: -3px;
    // border-style: solid;
    // border-color: transparent transparent transparent #fff;
    // background-color: transparent;
    // box-sizing: border-box;
  }

  .play-control .play-line {
    margin-left: 35px;
    padding-top: 4px;
  }

  .play-control .nstSlider {
    width: 100%;
    height: 6px;
    background-color: #E2E4EA;
    cursor: pointer;
    border-radius: 10px;
    position: relative;
    background: #113344;
  }

  .play-control .leftGrip {
    width: 14px;
    height: 14px;
    background-color: #919191;
    top: -4px;
    position: absolute;
    border-radius: 10px;
  }

  .play-control .play-line .play-info {
      padding-top: 5px;
      font-size: 12px;
  }

  .fr {
      float: right;
  }

  .clearfix:before {
    display: table;
    content: " ";
    box-sizing: border-box;
  }

  .clearfix:after {
    clear: both;
    display: table;
    content: " ";
  }

  .speed-control .speed-text {
      max-width: 50px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: inline-block;
  }

  .speed-control .speed-line {
      width: 80px;
      vertical-align: text-top;
  }

  .d-ib {
      display: inline-block;
  }

  .speed-control .nstSlider {
      height: 4px;
  }

  .speed-control .leftGrip {
    width: 6px;
    height: 10px;
    top: -3px;
    background-color: #919191;
    position: absolute;
    border-radius: 10px;
  }

  .play-control .nstSlider {
      width: 100%;
      height: 6px;
      background-color: #E2E4EA;
  }

  .nstSlider {
      cursor: hand;
      cursor: pointer;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      position: relative;
      width: 300px;
      height: 20px;
      background: #113344;
  }
</style>
